<template>
  <div class="u-page mai-conversation-add">
	  
	  <!--  默认消息头 -->
	  <HeadAddAndQun title="发现" />
	  
	  <!-- 背景图 名称 头像  开始 -->
	  <div class="bg_list_show">
		  <!-- 朋友圈 -->
		  <div @click="goMoments()" class="show_item margin-bottom-10">
			  <div class="show_item_icon"><img src="/static/icon/find/01.png"></div>
			  <div class="show_item_text">朋友圈</div>
			  <div class="show_itme_arrow"><u-icon name="arrow-right" color="#ddd" size="22"></u-icon></div>
		  </div>
		  
		  <!-- 扫一扫 -->
		  <div class="show_item margin-bottom-1">
		  	<div class="show_item_icon"><img src="/static/icon/find/04.png"></div>
		  	<div class="show_item_text">扫一扫</div>
		  	<div class="show_itme_arrow"><u-icon name="arrow-right" color="#ddd" size="22"></u-icon></div>
		  </div>
		  
		  <!-- 摇一摇 -->
		  <div class="show_item margin-bottom-10">
		  	<div class="show_item_icon"><img src="/static/icon/find/05.png"></div>
		  	<div class="show_item_text">摇一摇</div>
		  	<div class="show_itme_arrow"><u-icon name="arrow-right" color="#ddd" size="22"></u-icon></div>
		  </div>
		  
		  <!-- 搜一搜 -->
		  <div class="show_item margin-bottom-10">
		  	<div class="show_item_icon"><img src="/static/icon/find/07.png"></div>
		  	<div class="show_item_text">搜一搜</div>
		  	<div class="show_itme_arrow"><u-icon name="arrow-right" color="#ddd" size="22"></u-icon></div>
		  </div>
		  
		  <!-- 附近的人 -->
		  <div class="show_item margin-bottom-10">
		  	<div class="show_item_icon"><img src="/static/icon/find/08.png"></div>
		  	<div class="show_item_text">附近的人</div>
		  	<div class="show_itme_arrow"><u-icon name="arrow-right" color="#ddd" size="22"></u-icon></div>
		  </div>
		  
		  <!-- 小程序 -->
		  <div class="show_item margin-bottom-10">
		  	<div class="show_item_icon"><img src="/static/icon/find/11.png"></div>
		  	<div class="show_item_text">小程序</div>
		  	<div class="show_itme_arrow"><u-icon name="arrow-right" color="#ddd" size="22"></u-icon></div>
		  </div>
		  
		  <!-- 退出登录 -->
		  <div @click="logOut()" class="show_item margin-bottom-10">
		  	<div class="show_item_icon"><img src="/static/icon/find/03.png"></div>
		  	<div class="show_item_text">退出登录</div>
		  	<div class="show_itme_arrow"><u-icon name="arrow-right" color="#ddd" size="22"></u-icon></div>
		  </div>
	  </div>
	  <!-- 背景图 名称 头像  结束 -->
	  
  </div>
</template>
<script lang="ts" setup>
import { TUILogin } from '@tencentcloud/tui-core';
import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
import { TUIGlobal } from '@tencentcloud/universal-api';
import { ref } from '/TUIKit/adapter-vue';
import { onHide } from '@dcloudio/uni-app';
import { onLoad, onUnload } from '@dcloudio/uni-app';
import { removeTokenStorage } from '/utils/token';
// 加载自定义搜索组件
import HeadAddAndQun from '/pages/common/HeadAddAndQun/index.vue';
// 添加好友开关
const isAddShow = ref<boolean>(false);
// 加载时刻 自动初始化 聊天
onLoad((options) => {
	// TODO 自动加载
});
// 进行搜索
const goSearch = () =>{
	uni.navigateTo({
		url:'/pages/search/index'
	})
}
// 显示隐藏 添加好友功能
const toggleAddShow = () => {
  isAddShow.value = !isAddShow.value;
}
// 返回
const goBack = () =>{
	uni.navigateBack()
}
// 去朋友圈
const goMoments = () =>{
	uni.navigateTo({
		url:'/pages/moments/index'
	})
}
// 退出
const logOut = () =>{
	try{
			TUILogin.logout().then(() => {});
	} catch (e) {
		// error
	}
	// 普通 h5 清理
	try {
		uni.removeStorageSync('userTencentID');
	} catch (e) {
		// error
	}
	// 微信小程序里面 清理缓存
	removeTokenStorage();
	// 跳转页面
	uni.navigateTo({
		url:'/pages/views/login'
	})
}
</script>

<style>
	.margin-bottom-10{
		margin-bottom: 10px;
	}
	.margin-bottom-1{
		margin-bottom: 1px;
	}
	.mai-conversation-add{
		width: 100%; 
		height: 100%;
		display: flex;
		background-color: #fff;
		overflow: hidden;
		flex-direction: column;
		background-color: #f5f5f5;
	}
	/* 朋友圈背景图 姓名 头像 */
	.bg_list_show{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.show_item{
		display: flex;
		height: 60px;
		background-color: #fff;
		align-items: center;
	}
	.show_item_icon{width: 40px; margin-left: 10px; margin-top: 8px;}
	.show_item_icon img{width: 30px; height: 30px;}
	.show_item_text{
		height: 60px;
		line-height: 60px;
		flex: 1;
	}
	.show_itme_arrow{
		margin-right: 10px;
	}


</style>
